<template>
  <div class="header">
    <div class="logo">
      <img src="../../assets/brand8.png" alt="" />
      <span>网上花店</span>
    </div>
    <div class="nav" v-if="this.userInfo.data == null || this.userInfo.data.role === 'ROLE_USER'">

      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/flower">鲜花信息</el-menu-item>
        <el-menu-item index="/infomation">鲜花资讯</el-menu-item>

        <el-submenu index="2">
          <template slot="title">个人中心</template>
          <el-menu-item index="/address">我的地址</el-menu-item>
<!--          <el-menu-item index="/star">我的收藏</el-menu-item>-->
          <el-menu-item index="/order">我的订单</el-menu-item>
        </el-submenu>
        <el-menu-item index="/shopping">购物车</el-menu-item>
        
      </el-menu>
    </div>
    <div class="person">
      <div class="regist" v-if="!this.userInfo.data">
        <el-row>
          <el-button size="mini" @click="ok">登录</el-button>
        </el-row>
      </div>
      <div class="ok" v-else-if="this.userInfo.data">
        <el-dropdown :hide-on-click="true">
          <span class="el-dropdown-link">
            <img :src="Img" alt="" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              ><router-link to="/password"
                >修改密码</router-link
              ></el-dropdown-item
            >
            <el-dropdown-item @click.native="TD">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      Img: require('../../assets/sy.jpg'),
      activeIndex: "1",
      userInfo: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      user1: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    // 注册
    rester() {
      this.$router.push("/login");
    },
    // 登录
    ok() {
      this.$router.push("/login");
    },
    // 退出登录
    TD() {
      localStorage.removeItem("user");
      this.$emit("call-father");
      this.$router.push("/login");

    },
    // 验证用户头像是否存在，要是存在就换，null就是默认头像
    IsImg() {
      if (this.userInfo.data.avatarUrl) {
        // console.log(userInfo)
        this.Img = `"../assets/${this.userInfo.data.avatarUrl}"`;
      }
    },
  },
  created() {
    console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>", this.userInfo.data)
    // console.log(this.user1.data.username)
  },
  mounted() {
    // this.IsImg();
    //  let user = JSON.parse(localStorage.getItem("user"))
    // console.log(user)
    // console.log(this.userInfo)
    // console.log(this.userInfo.data.username)
  },
};
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 60px;
  display: flex;
  // justify-content 属性定义了项目在主轴上的对齐方式。
  justify-content: space-between;
  align-items: center;

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      display: inline-block;
      width: 180px;
      height: 60px;
    }
    span {
      display: inline-block;
      //   position: absolute;
      //   width: 100px;
      //   height: 60px;
      //   margin-top: 25%
    }
  }
  .nav {
    i {
      display: inline-block;
      margin-top: 30px;
    }
  }
  .person {
    display: flex;
    .el-button {
      width: 60px;
      height: 30px;
      justify-content: center;
      align-items: center;
      // margin-top: 20%;
    }
    .ok {
      .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
      }
      .el-dropdown-menu .el-dropdown-menu__item {
        // height: 200px;
        margin: 40px 20px;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
    }
    img {
      width: 40px;
      height: 40px;
      margin: 10px 30px;
      border: 1px solid #1b1b1b;
      border-radius: 50%;
    }
  }
}
</style>